<template>
  <el-dialog
    :visible="isShow"
    :modal="false"
    title="导入数据"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <el-upload
      ref="upload"
      class="upload-demo"
      action="#"
      :multiple="false"
      :limit="1"
      :auto-upload="false"
      :on-change="handleChange"
      :file-list="fileList"
      accept='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
    >
    <i class="el-icon-upload icon"></i>
      <!-- <el-button size="small" type="primary">点击上传</el-button> -->
      <div slot="tip" class="el-upload__tip">点击图标上传数据，只能上传excel数据</div>
    </el-upload>
    <div class="btns">
      <el-button type="plain" size="small" @click="closeDialog">取消</el-button>
      <el-button type="primary" size="small" @click="uploadData">导入</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
import XLSX from 'xlsx'
export default {
  props: {
    isShow: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      fileList: [],
      sheetData: []
    }
  },

  computed: {
    ...mapState(['selectedProjectId'])
  },

  methods: {
    closeDialog () {
      this.$emit('closeDialog', 'showUpload')
      this.$refs.upload.clearFiles()
    },

    handleChange (file, fileList) {
      const self = this
      const reader = new FileReader()

      reader.onload = function (result) {
        const data = result.target.result
        const workbook = XLSX.read(data, { type: 'binary' })
        const sheetNames = workbook.SheetNames

        const sheetData = XLSX.utils.sheet_to_json(workbook.Sheets[sheetNames[0]])
        console.log(sheetData, 'pppppp')
        self.sheetData = sheetData.map(item => {
          return {
            projectId: self.selectedProjectId,
            CLNo: item['钻杆编号'],
            date: item['日期'],
            startTime: item['开始时间'],
            endTime: item['结束时间'],
            timeLength: item['工作时间'],
            CL: item['CL(m)'] || item['钻杆长度(m)'],
            MD: item['MD(m)'] || item['累计长度(m)'],
            Away: item['Away(m)'] || item['水平长度(m)'],
            HS: item.HS || item['钟面角HS'],
            INC: item.INC || item['倾角INC'],
            AZ: item.AZ || item['方位角AZ'],
            HT: item.HT || item['自然磁场干扰HT'],
            Dip: item.Dip || item['磁偏角Dip'],
            Elev: item.Elev || item['高程Elev'],
            Right: item.Right || item['右偏']
          }
        })
        console.log(self.sheetData[0])
      }
      reader.readAsBinaryString(file.raw)
    },

    // 上传数据
    uploadData () {
      if (this.sheetData.length < 1) {
        this.$message({
          type: 'info',
          message: '请上传文件',
          showClose: true
        })
        return
      }

      if (!this.selectedProjectId) {
        this.$message({
          type: 'info',
          message: '请选择工程信息',
          showClose: true
        })
        return
      }
      this.$store.dispatch('uploadOrientationData', this.sheetData).then(res => {
        console.log(res, 'impot')
        if (res.success) {
          this.$message({
            type: 'success',
            message: '数据导入成功',
            showClose: true
          })
          this.closeDialog()
        } else {
          this.$message({
            type: 'warning',
            message: '数据导入失败,请重新导入',
            showClose: true
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.btns {
  margin-top: 1.25rem;
  /* text-align: right; */
}

.icon{
    font-size: 5rem;
}
</style>
